import React, {Component} from 'react';
import './style.scss'
import {connect} from 'react-redux'
import {actionCreator} from "./store";
import {SearchList} from "./serachlist";

const Header = (props) => {
    const {inputValueChange, searchValue, focus,mouseIn, searchKeys, handleFocus, handleBlur,handleMouseEnter,handleMouseLeave,changeSearchKeys} = props
    return (
        <div id='header'>
            <a href="#"><img id='logo'
                             src='https://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png'/></a>
            <div className='menus'>
                <a href=""><span>发现</span></a>
                <a href=""><span>关注</span></a>
                <a href=""><span>消息</span></a>
                <div className='search-wrap'>
                    <div className='search_box'>
                        <input className={(mouseIn || focus) ? 'input_search input-search-focus':'input_search'}
                               placeholder='搜索'
                               value={searchValue}
                               onChange={inputValueChange}
                               onFocus={handleFocus}
                               onBlur={handleBlur}/>
                        <i className={(focus || mouseIn) ? 'iconfont icon-search-focus' : 'iconfont icon-search'}></i>

                    </div>
                    {(focus || mouseIn ) ? <SearchList searchKeys={searchKeys}
                                 handleFocus={handleFocus}
                                 onMouseEnter={handleMouseEnter}
                                 onMouseLeave={handleMouseLeave}
                                                       changeSearchKeys={changeSearchKeys}/> : ''}
                </div>
            </div>
        </div>
    );
}


const mapStateToProps = (state) => {
    return {
        mouseIn: state.getIn(['header','mouseIn']),
        focus: state.getIn(['header', 'focus']),
        searchValue: state.getIn(['header', 'searchValue']),
        searchKeys: state.getIn(['header','searchKeys'])
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleMouseEnter() {
            dispatch(actionCreator.mouseEnter())
        },
        handleMouseLeave() {

            dispatch(actionCreator.mouseLeave())
        },
        handleFocus() {
            dispatch(actionCreator.fetchSearchKeys())
            dispatch(actionCreator.focus())
        },

        handleBlur() {
            dispatch(actionCreator.blur())
        },

        inputValueChange(e) {
            let value = e.target.value;
            dispatch(actionCreator.inputValueChange(value))
        },
        changeSearchKeys() {
            dispatch(actionCreator.changeSearchKeys())
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);
